import React,{ Component,Fragment } from 'react'
import { HomeStyle,SearchStyle,HeaderStyle,HomeGoTopStyle } from './HomeStyle';
import { Link,Route,Switch,Redirect } from 'react-router-dom'
import { Toast } from 'antd-mobile';

import HomeCommon from './HomeCommon'
import BScroll from 'better-scroll'
import HomeNav from './homenav/HomeNav';
import HomeIndex from './homenav/homeindex/HomeIndex';
import Global from './homenav/global/Global';
import MonandBaby from './homenav/monandbaby/MonandBaby';
import Luxury from './homenav/luxury/Luxury';
import Pop from './homenav/pop/Pop';

const BarItem = ( props ) => {
    return (
        <li className={ props.barFlag[props.index].activeFlag && "active" || '' } onClick={ props.active }>
      {  props.name}
        <i className="fa fa-angle-down" ></i>
        <ul 
        className={"list_sub" + (props.barFlag[props.index].activeFlag && " show" || " hide") }
        >
            
           { props.sub_categories.map(item => {
               return <li key={ item.category_id }> 
               <Link to={{
                   pathname:'/sortdetail/'+item.category_id
               }}> { item.name } </Link> 
               </li>
           })}
            
        </ul>
    </li>
    )
}

class Home extends Component{

    constructor () {
        super()
        this.state = {
            maskFlag: false,
            barFlag :[
                {
                    id:1,
                    activeFlag:false
                },
                {
                    id:2,
                    activeFlag:false
                },
                {
                    id:3,
                    activeFlag:false
                },
                {
                    id:4,
                    activeFlag:false
                },
                {
                    id:5,
                    activeFlag:false
                },
                {
                    id:6,
                    activeFlag:false
                },
                {
                    id:7,
                    activeFlag:false
                },
                {
                    id:8,
                    activeFlag:false
                },
                
            ],
            count:1,
            count1:1,
            count2:2,
            navFlag:false,
            topFlag:false,
           count3:3,
           
            navFlag:false
        }
    }


    show = () => { //遮罩层
        this.setState({
            maskFlag: !this.state.maskFlag
        })
    }
    
    active = (index) => {
        // 分类展开效果
        this.state.barFlag[index].activeFlag = !this.state.barFlag[index].activeFlag
        this.setState({
            barFlag:this.state.barFlag
        })
    }

    goSearch = () => {
        // 跳转到搜索页面
        this.props.history.push('/search')
    }

    renderBarItem = ( ) => { //渲染分类列表
        return this.props.bar_lists && this.props.bar_lists.map( (item,index) => {
            return (<BarItem { ...item } { ...this.state }  active={  () =>{this.active(index)} } key={item.category_id} index={index}/>)
        } )
    } 

   
    componentDidMount () {
        // console.log( this.box)

        this.props.getBarLists() //获取数据

        this.scroll = new BScroll ( this.box,{ //实例化
            mouseWheel: {
                speed: 5,
                invert: false,
                easeTime: 300
               },
               pullUpLoad: {
                threshold: 50 //开启上拉事件
            },
               click: true,
               probeType:2
               
               
        } )

        
        this.scroll.on( 'pullingUp',() => { //上拉加载

        //    console.log(this.props.location.pathname)

           if( this.props.location.pathname === '/home/index/now' ){
            
            if( this.state.count< 3 ){
                this.props.getMoreHomeLists('1.'+this.state.count)
                 this.scroll.finishPullUp()
            }else{
                Toast.loading('您拉到底了', 1, () => {
                  });
                this.scroll.finishPullUp()
            }
            this.setState({
                count:this.state.count+1
            })
        }else if( this.props.location.pathname === '/home/index/future' ){
            if( this.state.count1< 3 ){
                this.props.getMoreHomeLists('2.'+this.state.count1)
                 this.scroll.finishPullUp()
            }else{
                Toast.loading('您拉到底了', 1, () => {
                  });
                this.scroll.finishPullUp()
            }
            this.setState({
                count1:this.state.count1+1
            })
            console.log( this.state.count1 )
        }else if ( this.props.location.pathname === '/home/pop' || this.props.location.pathname === '/home/pop/' ) {
            if( this.state.count2<4) {
                this.props.getMorePopLists(this.state.count2)
                this.scroll.finishPullUp()
            }else{
                Toast.loading('您拉到底了', 1, () => {
                });
              this.scroll.finishPullUp()
            }
            this.setState({
                count2:this.state.count2+1
            })
        }else if ( this.props.location.pathname === '/home/luxury' || this.props.location.pathname === '/home/luxury/' ) {
            if( this.state.count3<4) {
                this.props.getMoreLuxury(this.state.count3)
                this.scroll.finishPullUp()
            }else{
                Toast.loading('您拉到底了', 1, () => {
                });
              this.scroll.finishPullUp()
            }
            this.setState({
                count3:this.state.count3+1
            })
        }
           
        })
        
      


        //吸顶菜单和回到顶部
        this.scroll.on("scroll",function(e){
            if(e.y<-300){
                if( !this.state.navFlag ){
                    this.setState({
                        navFlag:true,
                        topFlag:true
                    })
                }
            }
            if( e.y>-90 ){
                this.setState({
                    navFlag:false,
                    topFlag:false
                })
            }
        }.bind(this))

       
    }

    goTop = () => {
        
       
       this.scroll.scrollTo(0,0,500)
    }




    componentDidUpdate () {
        // console.log( this.props.bar_lists )
        
    }

    render () {
        return(
            <Fragment>
                {/* 搜索功能 */}
                { this.state.maskFlag &&
                <SearchStyle>
                        <div className="mask" onClick={ this.show } ></div>
                        <div className="search_mask">
                          <div className="serach_head">  
                            <a onClick={ this.goSearch }>
                            <i  className="fa fa-search"></i>   
                            <span>搜索商品 分类 功效</span>
                            </a>
                            <p className="back" onClick={ this.show }> 返回 </p>
                            </div>
                            <ul className="lists">
                               
                                {
                                    this.renderBarItem()
                                }
                            </ul>
                        </div>
                        
                </SearchStyle>}

                {/* 吸顶导航  */}
             { this.state.navFlag && <HomeNav style={{ position:'fixed' }} ref={el=>this.nav=el}/> }

                {/* 回到顶部 */}
        { this.state.topFlag &&   <HomeGoTopStyle onClick={ this.goTop }>
                <i className="fa fa-chevron-up"></i>  
            </HomeGoTopStyle>}


            {/* 滚动区域 */}
                <HomeStyle ref={ el => this.box = el } >
        
                 <div>

                    <HeaderStyle>
                        <header>
                            <a onClick={ this.goSearch } >
                            <i  className="fa fa-search"></i>   
                            <span >搜索商品 分类 功效</span>
                            </a>
                            <div>
                        <p onClick={ this.show }> <i className="fa fa-align-left search" ></i></p>
                            </div>
                        </header>
                    </HeaderStyle>

                    {/* 导航 */}
                    <HomeNav/>


                    {/* 二级路由展示区 */}
                     <Switch> 
                    <Redirect from="/home" to="/home/index" exact/>            
                    <Route path="/home/index" component={ HomeIndex }/>
                    <Route path="/home/global" component={ Global } />
                    <Route path="/home/luxury" component={ Luxury }/>
                    <Route path="/home/monandbaby" component={ MonandBaby }/>
                    <Route path="/home/pop" component={ Pop }/>
                    </Switch>    

                </div>
                </HomeStyle>
                  
            </Fragment>
            
        )
    }
}

export default HomeCommon(Home)